<template>
	<div id="out">
		<hr style="height:1px;border:none;border-top:1px solid #555555;" />
		<el-row>
			<div id="top">
				<div id="outtop-left1">
					<el-button type="info" icon="el-icon-receiving" size="small">打印</el-button>
				</div>
				<div id="outtop-left1">
					<el-button type="info" icon="el-icon-plus" size="small" @click="addoutbound">出库</el-button>
				</div>
				<div id="outtop-left1">
					<el-button type="info" icon="el-icon-edit" size="small" @click="dialogFormVisible = true">修改</el-button>
				</div>
				<div id="outtop-left1">
					<el-button type="info" icon="el-icon-delete" size="small" @click="dialogFormVisible = true">删除</el-button>
				</div>
				<div id="outtop-left1">
					<el-button type="info" icon="el-icon-refresh" size="small" @click="winReload">刷新</el-button>
				</div>
			</div>
		</el-row>
		<el-row>
			<div id="trhead-left1">
				查询方案
				<el-select v-model="value1" clearable placeholder="请选择">
					<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</div>
			<div id="trhead-left1">
				入库类别
				<el-select v-model="picktype" placeholder="请选择" clearable @change="getType">
					<el-option v-for="item in intype" :key="item.intId" :label="item.intName" :value="item.intName">
					</el-option>
				</el-select>
			</div>
			<div id="trhead-left2">
				产品查询:
			</div>
			<div id="trhead-left1">
				<el-input placeholder="请输入内容" v-model="search" prefix-icon="el-icon-search">
				</el-input>
			</div>
		</el-row>
		<el-row>
			<div align="center">
				<el-table :data="tableOutbound.filter(data => !search ||data.proId.toLowerCase().includes(search.toLowerCase()))"
				 style="width: 98%" height="600" :default-sort="{prop: 'tra_id', order: 'descending'}" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
					<el-table-column fixed prop="outStatic" label="状态" sortable width="100">
					</el-table-column>
					<el-table-column fixed prop="outId" label="编号" sortable width="100">
					</el-table-column>
					<el-table-column fixed prop="proId" label="产品名称" sortable width="120">
					</el-table-column>
					<el-table-column fixed prop="saleId" label="订单单号" sortable width="140">
					</el-table-column>
					<el-table-column prop="warName" label="出库仓库" sortable width="140">
					</el-table-column>
					<el-table-column prop="intName" label="出库类别" sortable width="140">
					</el-table-column>
					<el-table-column prop="outDate" label="出库时间" sortable width="140">
					</el-table-column>
					<el-table-column prop="outNum" label="数量" sortable width="100">
					</el-table-column>
					<el-table-column prop="outUse" label="客户" :formatter="formatter1" width="180">
					</el-table-column>
					<el-table-column prop="outKind" label="运输方式" :formatter="formatter2" width="180">
					</el-table-column>
					<el-table-column prop="outNote" label="备注" :formatter="formatter3" width="180">
					</el-table-column>
					<el-table-column align="right" width="240">
						<template slot-scope="scope">
							<el-button size="mini" @click="staticEdit(scope.$index, scope.row)">审核</el-button>
							<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
							<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<el-dialog title="产品出库" :visible.sync="dialogFormVisible">
				<el-form :model="form" label-width="100px">
					<el-form-item label="产品名称">
						<el-select v-model="form.proId" clearable placeholder="请选择">
							<el-option v-for="item in product" :key="item.proId" :label="item.proName" :value="item.proName">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="订单编号">
						<el-input v-model="form.saleId" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="出库类别">
						<el-select v-model="form.intName" placeholder="请选择">
							<el-option v-for="item in intype" :key="item.intId" :label="item.intName" :value="item.intName"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="出库仓库">
						<el-select v-model="form.warName" placeholder="请选择">
							<el-option v-for="item in warehouse" :key="item.warId" :label="item.warName" :value="item.warName"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="数量">
						<el-input-number v-model="form.outNum" @change="handleChange" :min="1" :max="2000" label="描述文字"></el-input-number>
					</el-form-item>
					<el-form-item label="运输方式">
						<el-input v-model="form.outKind" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="客户">
						<el-input v-model="form.outUse" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="备注">
						<el-input type="textarea" :rows="3" v-model="form.outNote" autocomplete="off" placeholder="请输入内容"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer" style="height: 50px;">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button v-show="!isedit" type="primary" @click="sureAddOutbound" :disabled="disable3">确 定</el-button>
					<el-button v-show="isedit" type="primary" @click="sureUpdate">修 改</el-button>
				</div>
			</el-dialog>
			
			<el-dialog title="出库修改" :visible.sync="dialogFormVisible1">
				<el-form :model="form" label-width="100px">
					<el-form-item label="产品名称">
						<el-input v-model="form.proId" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="订单编号">
						<el-input v-model="form.saleId" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="出库类别">
						<el-select v-model="form.intName" placeholder="请选择">
							<el-option v-for="item in intype" :key="item.intId" :label="item.intName" :value="item.intName"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="出库仓库">
						<el-select v-model="form.warName" placeholder="请选择">
							<el-option v-for="item in warehouse" :key="item.warId" :label="item.warName" :value="item.warName"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="数量">
						<el-input-number v-model="form.outNum" @change="handleChange" :min="1" :max="2000" label="描述文字"></el-input-number>
					</el-form-item>
					<el-form-item label="运输方式">
						<el-input v-model="form.outKind" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="客户">
						<el-input v-model="form.outUse" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="备注">
						<el-input type="textarea" :rows="3" v-model="form.outNote" autocomplete="off" placeholder="请输入内容"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer" style="height: 50px;">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button v-show="isedit" type="primary" @click="sureUpdate">修 改</el-button>
				</div>
			</el-dialog>
		</el-row>
		<el-row>
			<div align="center" style="margin-top: 20px;">
				<el-pagination background layout="prev, pager, next" :total="200"></el-pagination>
			</div>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				outNum: 1,
				disable3:false,
				options1: [{
					value: '选项1',
					label: '默认查询'
				}, {
					value: '选项2',
					label: '本年查询'
				}, {
					value: '选项3',
					label: '本月查询'
				}, {
					value: '选项4',
					label: '本周查询'
				}, {
					value: '选项5',
					label: '本日查询'
				}],
				intype: [],
				warehouse:[],
				value1: '默认查询',
				picktype: '默认全部',
				tableOutbound: [],
				search: '',
				prod: '',
				dialogTableVisible: false,
				dialogFormVisible: false,
				dialogFormVisible1: false,
				form: {
					outId: '',
					proName: '',
					saleId: '',
					warName: '',
					intName: '',
					outNum: '',
					outUse: '',
					outKind: '',
					outNote: '',
					outStatic:''
				},
				//选择种类
				types1: [],
				types2: [],
				isedit: false,
				myindex: -1
			}
		},
		mounted() {
			var _this = this;
			this.$axios.post("findoutbound").then(res => {
				if (res.data) {
					_this.tableOutbound = res.data.outbound;
					_this.intype = res.data.intype;
					_this.warehouse = res.data.warehouse;
					_this.product = res.data.product;
				} else {
					alert("出错了！！");
				}

			}).catch(ex => {
				alert("出错了8888");
			})
		},
		methods: {
			formatter1(row, column) {
				return row.outUse;
			},
			formatter2(row, column) {
				return row.outKind;
			},
			formatter3(row, column) {
				return row.outNote;
			},
			add() {
				this.dialogFormVisible = true;
			},
			addoutbound(){
				//新增
				this.form={
					outId: '',
					proName: '',
					saleId: '',
					warName: '',
					intName: '',
					outNum: '',
					outUse: '',
					outKind: '',
					outNote: '',
					outStatic:''
				}
				this.dialogFormVisible = true;
			},
			sureAddOutbound() {
				//确认添加
				this.$axios.post("addoutbound",this.form).then(v=>{
					this.key2=v.data.ans;
						if(this.key2=='y'){
							alert("出库成功！！");
							this.$router.push("/outbound");
						}else{
							alert("出错失败,产品不存在!!");
						}
				}).catch(ex=>{
					alert("出错了！"+ex);
				})
				this.dialogFormVisible = false;
				this.tableOutbound.push(this.form);
			},
			//修改
			handleEdit(index, row) {
				this.isedit = true;
				this.dialogFormVisible1 = true;
				this.form = {
					outId: row.outId,
					proId: row.proId,
					saleId: row.saleId,
					warName: row.warName,
					intName: row.intName,
					outNum: row.outNum,
					outKind: row.outKind,
					outUse:row.outUse,
					//outDate: row.outDate,
					outNote: row.outNote,
					outStatic: row.outStatic,
				};
				this.myindex = index;
			},
			sureUpdate: function() {
				this.$axios.post("editoutbound", this.form).then(v => {
					console.log(v)
					if (v.data) {
						alert("修改成功！！")
					} else {
						alert("出错了！！");
					}
				}).catch(ex => {
					alert("出错了！" + ex);
				})
				//根据form.id确认要修改的webs的id值
				this.tableOutbound.splice(this.myindex, 1, this.form);
				//确认修改
				this.dialogFormVisible1 = false;
				this.isedit = false; //修改状态结束
			},
			//删除
			handleDelete(index, row) {
				var _this = this;
				this.$confirm(
					"你确定要删除该数据吗？",
					"温馨提示", {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}
				).then(() => {
					_this.$message({
						type: "success",
						message: "删除成功"
					});
					
					this.$axios.post("deloutbound?outId=" + row.outId + "").then(v => {
						console.log(v)
						if (v.data) {
							alert("删除部门成功！！");
						} else {
							alert("出错了！！");
						}
					}).catch(ex => {
						alert("出错了！" + ex);
					})
					//index是索引，id是数据key值
					_this.tableOutbound.splice(index, 1);
				}).catch(() => {
					_this.$message({
						type: "info",
						message: "你已经取消"
					});
				})
			
			},
			//审核
			staticEdit(index, row) {
				var _this = this;
				this.$confirm(
					"确认通过[ "+row.outId+" ]单据审核吗?",
					"审核提示", {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}
				).then(() => {
					_this.$message({
						type: "success",
						message: "审核通过"
					});
					
					this.$axios.post("passout?outId=" + row.outId + "").then(v => {
						console.log(v)
						if (v.data) {
							alert("审核通过");
						} else {
							alert("出错了！！");
						}
					}).catch(ex => {
						alert("出错了！" + ex);
					})
					//根据form.id确认要修改的webs的id值
					this.tableOutbound.splice(this.myindex, 1, this.row);
				}).catch(() => {
					_this.$message({
						type: "info",
						message: "你已经取消"
					});
				})
			
			},
			//触发事件
			getType: function() {
				alert('您选择了' + this.picktype);
				var _this = this;
				this.$axios.post("findoutbound?intName=" + this.picktype + "").then(res => {
					if (res.data) {
						_this.tableOutbound = res.data.outbound;
						_this.intype = res.data.intype;
						_this.warehouse = res.data.warehouse;
					} else {
						alert("出错了！！");
					}
				
				}).catch(ex => {
					alert("出错了8888");
				})
			},
			//刷新页面
			winReload: function(cond) {
				this.$router.go(0);
			},
		}
	}
</script>

<style>
	#out {
		margin: 5px 15px 5px 15px;
	}

	#top {
		width: 100%;
		height: 50px;
		border: 1px solid #FF0000;
	}

	#trhead-left1 {
		margin: 10px 15px 8px 5px;
		float: left;
	}

	#trhead-left2 {
		margin-top: 18px;
		float: left;
	}

	#outtop-left1 {
		width: 50px;
		margin-top: 7px;
		margin-left: 40px;
		float: left;
	}
</style>
